<!--
 * @Author: your name
 * @Date: 2021-03-11 14:45:37
 * @LastEditTime: 2021-03-12 16:01:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ui-demo\src\components\Login.vue
-->
<template>
  <div>
    <el-row style="margin-bottom: 30px">
      <el-col :span="4">
        <el-input
          v-model="listQuery.username"
          placeholder="请输入账号"
          clearable
          type="primary"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="getList"
        />

      </el-col>

      <el-col :span="10">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="getList"
        >查阅</el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-del"
          @click="save"
        >新增</el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-del"
          @click="edit"
        >修改</el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-del"
          @click="del"
        >删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="list"
          border
          :header-cell-style="{background:'#A8EFFD'}"
          style="width: 100%"
          highlight-current-row
          @row-click="initSelect"
        >
          <el-table-column
            prop="userId"
            label="用户Id"
            width="300"
            align="center"
          />
          <el-table-column
            prop="username"
            label="账号"
            width="300"
            align="center"
          />
          <el-table-column
            prop="token"
            label="token"
            align="center"
          />
        </el-table>
      </el-col>
    </el-row>

    <el-row style="margin-top:30px">
      <el-pagination
        background
        layout="prev, pager, next"
        v-show="total>0"
        :total="total"
        :current-page.sync="listQuery.page"
        :page-size.sync="listQuery.rows"
        @current-change="getList"
      />
    </el-row>

    <el-dialog type="primary" title="新增用户" :visible.sync="showSave" width="550px" center>
      <Save v-if="showSave" @submit="submit" />
    </el-dialog>
    <el-dialog type="primary" title="修改用户" :visible.sync="showEdit" width="550px" center>
      <Edit v-if="showEdit" :edit-user="tmp" @submit="submit" />
    </el-dialog>

  </div>
</template>

<script>
// 引入封装的接口方法
import { searchList, delUser } from '@/api/user.js'
// 引入自己编写的新增/修改界面(组件)
import Save from './AddUser'
import Edit from './EditUser'
// 引入第三方包组件
import { Message } from 'element-ui'

export default {
  // 组件名称
  name: 'Login',
  // 改组件调用子组件
  components: { Save, Edit },
  // 变量定义
  data () {
    return {
      listQuery: {
        username: '',
        page: 1,
        rows: 20
      },
      list: [],
      total: 0,
      tmp: {},
      showSave: false,
      showEdit: false
    }
  },
  // 组件创建时调用方法
  created () {
    // 调用查询方法
    this.getList()
  },
  // 方法定义
  methods: {
    // 方法定义
    getList () {
      // 调用自定义接口
      searchList(this.listQuery).then(response => {
        this.list = response.data.content
        this.total = response.data.totalElements
        this.tmp = {}
      })
    },
    // 子组件触发父组件方法
    submit () {
      this.showSave = false
      this.showEdit = false
      this.getList()
    },
    // 选中
    initSelect (row) {
      this.tmp = row
    },
    // 删除
    del () {
      if (JSON.stringify(this.tmp) === '{}') {
        Message({
          message: '请选择用户',
          type: 'warning',
          duration: 3 * 1000
        })
        return
      }
      delUser(this.tmp.userId).then(response => {
        this.$message({
          message: response.msg || '删除成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.getList()
        this.tmp = {}
      })
    },
    // 保存
    save () {
      this.showSave = true
    },
    // 修改
    edit () {
      if (JSON.stringify(this.tmp) === '{}') {
        Message({
          message: '请选择用户',
          type: 'warning',
          duration: 3 * 1000
        })
        return
      }
      this.showEdit = true
    }
  }
}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
